<template>
	<div class="mobile-layout" v-resize="onResize">
		<keep-alive :include="['MobileCusSearch']">
			<router-view />
		</keep-alive>
	</div>
</template>
<script>
const app = document.getElementById("app");
const html = document.querySelector("html");

export default {
	data() {
		return {
			width: 750,
			fontSize: 100
		};
	},
	created() {
		this.onResize();
		this.$once("hook:beforeDestroy", () => {
			app.style.minWidth = "1300px";
			html.style = "";
		});
	},
	methods: {
		onResize() {
			app.style.minWidth = "7.5rem";
			this.changePage();
		},
		changePage() {
			document
				.getElementsByTagName("html")[0]
				.setAttribute(
					"style",
					"font-size:" + this.widthProportion() * this.fontSize + "px !important"
				);
		},
		widthProportion() {
			var p =
				((document.body && document.getElementsByTagName("html")[0].offsetWidth) ||
					document.getElementsByTagName("html")[0].offsetWidth) / this.width;
			return p > 1 ? 1 : p < 0.426 ? 0.426 : p;
		}
	}
};
</script>
<style lang="scss">
.mobile-layout {
	width: 7.5rem;
	height: 100%;
	overflow: auto;
	margin: 0 auto;
	background: #f3f3f3;
	font-size: 0.32rem;
	::-webkit-scrollbar {
		// display: none;
		width: 1px;
	}
	.van-nav-bar {
		z-index: 999;
		line-height: 0.44rem;
		&__content {
			height: 0.92rem;
		}
		.van-icon,
		&__title {
			color: #333;
			// font-weight: bold;
		}
		.van-icon {
			font-size: 0.36rem;
		}
		&__text {
			font-size: 0.3rem;
		}
		&__title {
			font-size: 0.32rem;
			line-height: 0.46rem;
		}
	}
	.van-picker__confirm {
		color: $primary;
	}
	.el-input--mini .el-input__inner {
		border: 0 !important;
		padding: 0 !important;
	}
	.el-textarea textarea {
		border: 0 !important;
	}
	.el-form-item {
		padding: 0 0.3rem !important;
		margin-bottom: 0.2rem !important;
	}
	.el-input.is-disabled .el-input__inner {
		background: transparent;
	}
	.el-upload--picture-card {
		width: 1.6rem;
		height: 1.6rem;
	}
	.el-upload {
		width: 1.6rem;
		height: 1.6rem;
		line-height: 1.6rem;
	}
	.el-upload--picture-card i {
		font-size: 0.35rem;
	}
	.cl-upload__text {
		font-size: 0.24rem;
	}
	.el-upload-list__item.is-success .el-upload-list__item-status-label {
		display: none;
	}
	.el-upload-list--picture-card .el-upload-list__item {
		width: 1.6rem;
		height: 1.6rem;
		line-height: 1.6rem;
	}
	.el-upload-list--picture-card .el-upload-list__item-thumbnail {
		width: 1.6rem;
		height: 1.6rem;
		line-height: 1.6rem;
	}
}
</style>
